import React, {useRef, useState, useEffect, useCallback} from 'react';
import {View, StyleSheet} from 'react-native';

const ScrollBar = ({scrollY, contentHeight, containerHeight}) => {
  const scrollBarHeight = containerHeight * (containerHeight / contentHeight);
  const scrollBarTop = scrollY * (containerHeight / contentHeight);

  return (
    <View style={styles.scrollBarContainer}>
      <View
        style={[styles.scrollBar, {height: scrollBarHeight, top: scrollBarTop}]}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  scrollBarContainer: {
    ...StyleSheet.absoluteFillObject,
    right: 0, // 滚动条位置，你可以根据需要调整
    width: 10, // 滚动条宽度
    backgroundColor: 'transparent',
  },
  scrollBar: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)', // 滚动条颜色
    width: '100%',
    borderRadius: 5,
  },
});
export default ScrollBar;
